<template>
  <div class="page page-content">
    <keep-alive>
      <router-view v-wechat-title="$route.meta.title"></router-view>
    </keep-alive>
    <div class="footer_title" @click="hezuo">
      F+智选 提供系统支持，商务合作请联系 <span class="footer_right"></span>
    </div>
    <!-- 商务合作 -->
    <mt-popup
      v-model="popupVisible_hezuo"
      popup-transition="popup-fade">
      <div class="baoming hezuo">
        <div class="bm_header">
          <p class="title_1">商务合作</p>
        </div>
        <p class="bm_title">
          红星美凯龙聚合全体系优质招商资源，通过全渠道获客、业务绩效管控、线上精准爆单等措施聚焦经营，提升招商效能！如需加入 “数字化招商，新品路演”服务，请留下您的联系方式。
        </p>
        <input class="name input" v-model="form2.name" placeholder="请输入您的姓名" type="text">
        <input class="name input" v-model="form2.phone" placeholder="请输入联系方式" type="tel">
        <input class="name input" v-model="form2.brand_name" placeholder="请输入单位品牌" type="text">
        <input class="name input" v-model="form2.advisory_matters" placeholder="请输入咨询事项" type="text">
        <mt-button class="submit" :disabled='submitbtnhezuo' @click="handlesubmithezuo">提交</mt-button>
        <div v-if="swqrcode.length>0" class="hezuo_footer">
          <img :src="swqrcode" alt="">
          <p>加微信 联系我</p>
        </div>
      </div>
      <img class="bmclose" @click="close" src="../assets/share/close_radius.png"/>
    </mt-popup>
    <div class="nav-footer">
      <footer>
        <router-link
          v-for="(item, index) in navList"
          :to="item.path"
          :key="index"
          v-if="is_staff || (item.name != '我的' && item.name != '分享')"
          v-bind:class="{'active':activeRoute == item.path}"
        >
          <div :class="'tab-'+index"></div>
          <p v-text="item.name"></p>
        </router-link>
      </footer>
    </div>
  </div>
</template>

<script>
import { swqrcode, business } from 'api/home-api'
export default {
  data() {
    return {
      navList: [
        {
          path: '/home',
          name: '首页'
        },
        {
          path: '/story',
          name: '品牌'
        },
        {
          path: '/share',
          name: '分享'
        },
        {
          path: '/my',
          name: '我的'
        }
      ],
      form2: {},
      swqrcode: '',
      popupVisible_hezuo: false,
      submitbtnhezuo: false,
      is_staff: true
    }
  },
  computed: {
    activeRoute() {
      return this.$route.path
    }
  },
  mounted() {
    var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    if (user['is_staff'] === '1' || user['is_staff'] === 1) {
      this.is_staff = false
    }
    this.getswqrcode() // 获取商务合作的二维码
  },
  methods: {
    close () {
      this.popupVisible_hezuo = false
    },
    hezuo() {
      this.popupVisible_hezuo = true
    },
    getswqrcode () {
      swqrcode({}).then(response => {
        var data = response.data
        if (response.code === 0) {
          this.swqrcode = data.url
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击商务合作的提交按钮
    handlesubmithezuo () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (!this.form2.name) {
        this.$toast('请输入您的名字')
        return
      }
      if (!this.form2.phone) {
        this.$toast('请输入联系方式')
        return
      }
      if (!this.form2.brand_name) {
        this.$toast('请输入单位品牌')
        return
      }
      if (!this.form2.advisory_matters) {
        this.$toast('请输入咨询事项')
        return
      }
      this.form2.app_id = user['app_id']
      this.form2.user_id = user['user_id']
      this.form2.inviter_id = user['inviter_id']
      this.form2.inviter_name = user['inviter_name']
      this.submitbtnhezuo = true
      this.form2.is_baoming = 3
      business(this.form2).then(data => {
        if (data.code === 0) {
          this.popupVisible_hezuo = false
          this.$toast('提交成功')
        } else {
          this.$toast(data.info)
        }
        this.submitbtnhezuo = false
      }).catch(() => {
        this.submitbtnhezuo = false
        this.$toast('提交失败，出现了不可预知的错误')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.page {
  background: #fff;
}
.footer_title{
  .h(40);
  .lh(40);
  .fs(24);
  .mt(46);
  .mb(118);
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ACACAC;
  display: flex;
  align-items: center;
  justify-content: center;
  .footer_right{
    .w(12);
    .h(12);
    .b-top(3, #ACACAC);
    display: inline-block;
    .border-right-solid(3, #ACACAC);
    transform: rotate(45deg);
    .ml(4);
  }
}
.baoming{
  .w(670);
  background: #FFF;
  position: relative;
  .pb(40);
  .b-radius(12);
  .title_1{
    .h(60);
    .fs(44);
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    .lh(60);
    .mt(40);
    color:rgba(248,63,67,1);
  }
  .title_2{
    .mt(4);
    .h(44);
    .fs(32);
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    .lh(44);
    color:rgba(248,63,67,1);
  }
  .bm_header{
    .w(670);
    .h(184);
    overflow: hidden;
    background: url("../assets/share/bm_bg.png") no-repeat center;
    background-size: cover;
    .b-radius(12);
  }
  .input{
    .w(590);
    .h(80);
    border: 0;  // 去除未选中状态边框
    outline: none; // 去除选中状态边框
    background:rgba(245,245,245,1);
    .b-radius(12);
    .fs(30);
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color: #000;
    .lh(60);
    .t-indent(40);
    .mt(30);
    caret-color: #000;
  }
  input:focus{
    outline:none;
    caret-color: #000;
  }
  .city{
    .lh(80);
  }
  ::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #929292;
  }
  ::-moz-placeholder {
      /* Firefox 19+ */
      color: #929292;
  }
  :-ms-input-placeholder {
      /* IE 10+ */
      color: #929292;
  }
  :-moz-placeholder {
      /* Firefox 18- */
      color: #929292;
  }
  .name{
    .mt(50)
  }
  .city_box{
    position: relative;
    span{
      display: block;
      .w(14);
      .h(24);
      position: absolute;
      .top(28);
      .right(80);
      background: url("../assets/share/jiantou_right.png") no-repeat center;
      background-size: 100%;
    }
    .city{
      margin: 0 auto;
      text-align: center;
      .mt(30);
      color: #929292;
      text-align: left;
    }
    .city_active{
      color: #000;
    }
  }
  .ercode_box{
    position: relative;
    .getercode{
      position: absolute;
      text-align: center;
      .right(80);
      .h(80);
      .fs(30);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(252,78,76,1);
      .lh(80);
      bottom: 0px;
      background: #f5f5f5;
      border: none;
    }
    .auth_text_blue{
      color: #929292;
    }
  }
  .baomingnumber{
    .mt(30);
    .h(40);
    .fs(28);
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color: #000;
    .lh(40);
    span{
      color:rgba(248,63,67,1);
    }
  }
  .selecr_pinpai{
    .w(590);
    margin: 0 auto;
    .mt(30);
    .fs(28);
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #464646;
    text-align: left;
    .selecr_pinpai_box{
      display: flex;
      flex-wrap: wrap;
      span{
        text-align: center;
        .lh(34);
        .mr(34);
        .mt(24);
        .h(34);
        background: #F5F5F5;
        .b-radius(24);
        .pl(14);
        .pr(14);
        .pt(6);
        .pb(6);
        .fs(24);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #929292;
      }
      .active{
        color: #F83F43;
        background: #FEEDE8;
        .border-solid(2, rgba(248, 63, 67, 0.79))
      }
    }
  }
  .baomingxieyi{
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    .fs(24);
    .mt(36);
    color: #929292;
    input[type="checkbox"]{
      .w(24);
      .h(24);
      .mr(16);
      color: #929292;
      -webkit-appearance: none;
      border-radius: 0px;
      .border-solid(2, #929292); /*去除未选中状态边框*/
      outline: none;  /*去除选中状态边框*/
      background:rgba(255, 255, 255, 0); /* 透明背景*/
    }
    input:checked{
      background: url("../assets/imgs/gou.png") no-repeat center;
      background-size: cover;
    }
    a{
      color: #929292;
      display: block;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(146,146,146,1);
      text-decoration: underline;
    }
  }
  .submit{
    .w(470);
    .h(80);
    background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
    .b-radius(40);
    .fs(40);
    display: block;
    .lh(80);
    margin: 0 auto;
    .mt(22);
    color: #FFF;
  }
}
.hezuo{
  .bm_header{
    .h(128);
    background: url("../assets/imgs/hz_bg.png") no-repeat center;
    background-size: cover;
  }
  .bm_title{
    .w(590);
    // .h(88);
    .fs(28);
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(39,39,39,1);
    .lh(44);
    text-align: left;
    margin: 0 auto;
    color: #272727;
    .mt(30);
    // text-overflow: ellipsis;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    // display: -webkit-box;
    // display: box;
    // overflow: hidden;
  }
  .input{
    .mt(26);
  }
  .submit{
    .mt(36);
  }
  .hezuo_footer{
    margin: 0 auto;
    .mt(40);
    img{
      .w(180);
      .h(180);
    }
    p{
      .mt(20);
      .fs(28);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(70,70,70,1);
    }
  }
}
.bmclose{
  display: block;
  .w(64);
  .h(64);
  margin: 0 auto;
  .mt(40);
  // background: url("../../assets/share/close_radius.png") no-repeat center;
  // background-size: 100%;
}
.nav-footer {
  position: fixed;
  left: 0px;
  z-index: 4;
  bottom: 0px;
  width: 100%;
  .h(100);
  // background: @tab-general-bg-color;
  background: #fff;
  display: block;
  footer {
    font-size: 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #f8f8f8;
    .pt(14);
    line-height: 1.2;
    width: 100%;
    .h(98);
    display: flex;
    a {
      text-decoration: none;
      color: @base-font-gray;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      text-align: center;
      box-sizing: border-box;
      display: block;
      .fs(24);
      .tab-0,
      .tab-1,
      .tab-2,
      .tab-3 {
        display: inline-block;
        .h(42);
        .w(42);
        background-size: 100%;
      }
      .tab-0 {
        // background-image: url("../assets/imgs/index-noselect.svg");
        background-image: url("../assets/share/zhibo.png");
      }
      .tab-1 {
        // background-image: url("../assets/imgs/note-noselect.svg");
        background-image: url("../assets/share/pinpai.png");
      }
      .tab-2 {
        // background-image: url("../assets/imgs/print-noselect.svg");
        background-image: url("../assets/share/fenxiang.png");
      }
      .tab-3 {
        // background-image: url("../assets/imgs/dy-noselect.svg");
        background-image: url("../assets/share/my.png");
      }
      &:hover {
        text-decoration: none;
      }
      &.router-link-active.active {
        color: @base-color;
        .tab-0 {
          // background-image: url("../assets/imgs/index-select.svg");
          background-image: url("../assets/share/zhibo_hover.png");
        }
        .tab-1 {
          // background-image: url("../assets/imgs/note-select.svg");
          background-image: url("../assets/share/pinpai_hover.png");
        }
        .tab-2 {
          // background-image: url("../assets/imgs/print-select.svg");
          background-image: url("../assets/share/fenxiang_hover.png");
        }
        .tab-3 {
          // background-image: url("../assets/imgs/dy-select.svg");
          background-image: url("../assets/share/my_hover.png");
        }
      }
    }
    p {
      margin: 0;
    }
  }
}
</style>
